<template>
    <div>
        <el-form ref="form" lable-width="70px" :model="form" :rules="rules" class="login-container" :inline="true">
            <h3 class="login_title">系统登录</h3>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input style="margin-left: 15px;" type="password" v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="submit" style="margin-left: 105px;margin-top: 20px;" type="primary">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Mock from 'mockjs'
import Cookie from 'js-cookie'
import { getMenu } from '../api'
export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
        //这里存放数据
        return {
            form: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, trigger: 'blur', message: "请输入用户名" }
                ],
                password: [
                    { required: true, trigger: 'blur', message: "请输入密码" }
                ]
            }
        };
    },
    //计算属性 类似于 data 概念
    computed: {},
    //监控 data 中的数据变化
    watch: {},
    //方法集合
    methods: {
        //登陆方法
        submit() {
            //token 信息
            //此处会获取随机数
            //const token=Mock.Random.guid();
            // token 信息存入cookie用于不同页面间的通信
            //Cookie.set('token',token);
            //跳转到首页

            //表单校验
            this.$refs.form.validate((valid) => {
                if (valid) {
                    getMenu(this.form).then(({ data }) => {
                        if (data.code == 20000) {
                            Cookie.set('token', data.data.token)
                            this.$router.push('home');
                            //获取菜单数据，存入store中
                            this.$store.commit('setMenu',data.data.menu)
                            this.$store.commit('addMenu',this.$router)
                        } else {
                            this.$message({
                                showClose: true,
                                message: data.data.message,
                                type: 'error'
                            });
                        }
                    })
                }
            })
        }
    },
    //生命周期 - 创建完成（可以访问当前 this 实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有 keep-alive 缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.login-container {
    width: 350px;
    border: 1px solid #eaeaea;
    margin-left: 40%;
    margin-top: 15%;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 25px #cac6c6;
    box-sizing: border-box;

    .el-input {
        width: 180px;

    }

    .login_title {
        text-align: center;
        margin-bottom: 40px;
        color: #333;
    }

}
</style>